<template>
  <div class="transfer">
    <je-modal
      v-model:visible="visible1"
      title="转移"
      button-align="center"
      width="600"
      height="auto"
      :resize="false"
      :maximizable="false"
      cancel-button
      :ok-button="onSubmit"
      @close="closeDialog"
    >
      <div class="warp">
        <je-form
          :model="modelRef"
          style="width: 500px"
          :label-col="{ span: 7 }"
          :wrapper-col="{ span: 17 }"
          autocomplete="off"
          label-align="right"
          :colon="false"
        >
          <je-form-item
            label="转移到该角色下"
            :model="modelRef"
            name="modelRef.name"
            v-bind="validateInfos.name"
          >
            <je-tree-select
              v-model:value="modelRef.name"
              :editable="false"
              :querys="[
                {
                  code: 'JE_RBAC_ROLE_ID',
                  value: columnID,
                  type: 'notIn',
                  cn: 'and',
                },
              ]"
              :orders="[{ code: 'SY_TREEORDERINDEX', type: 'ASC' }]"
              :select-options="{ title: '转移到该角色下' }"
              config-info="JE_RBAC_ROLETREE,id~name,id~text,S"
              @select="selectSubmit"
            />
          </je-form-item>
        </je-form>
      </div>
    </je-modal>
  </div>
</template>

<script>
  import { defineComponent, nextTick, onMounted, reactive, ref, toRaw } from 'vue';

  import { Form, Modal, InputSelect } from '@jecloud/ui';

  import { moveRoleApi } from '@/api';

  const useForm = Form.useForm;

  export default defineComponent({
    name: 'Transfer',
    components: {
      JeModal: Modal,
      // JeInput: Input,
      JeTreeSelect: InputSelect.Tree,
      JeForm: Form,
      JeFormItem: Form.Item,
      // JeTree: Tree,
    },
    props: {
      visible: {
        type: Boolean,
        default: false,
      },
      treeSelectDate: {
        type: Array,
        required: true,
      },
      currentRow: {
        type: Object,
        default: () => {},
      },
    },
    emits: ['update:visible', 'transfer'],
    setup(props, { emit }) {
      // 自己关闭对话框，修改父组件数据状态
      const closeDialog = () => {
        emit('update:visible', false);
      };
      const visible1 = ref(props.visible);
      const modelRef = reactive({
        name: '',
        id: '',
      });
      // 树的显隐
      const treeVisible = ref(false);
      // 验证规则
      // const validateHas = async () => {
      //   getTreeItems(props.treeSelectDate);
      //   const isTure = result.some((item) => {
      //     return item.text === modelRef.name;
      //   });
      //   if (isTure) {
      //     return Promise.resolve();
      //   } else {
      //     return Promise.reject('未找到节点');
      //   }
      // };
      // // 将tree转成一元数组,并去掉当前row和其子集
      // const result = [];
      // const getTreeItems = (data) => {
      //   let res = data.filter((item) => {
      //     return item.id !== props.currentRow.id;
      //   });
      //   res.forEach((item) => {
      //     result.push(item);
      //     console.log(item.children);
      //     if (item.children.length > 0) {
      //       getTreeItems(item.children);
      //     }
      //   });
      //   return result;
      // };
      const rulesRef = reactive({
        name: [
          {
            required: true,
            message: '该输入项为必填项',
          },
          // {
          //   required: true,
          //   validator: validateHas,
          // },
        ],
      });

      const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef, {
        // onValidate: (...args) => console.log(...args),
      });
      // 转移确认
      const onSubmit = () => {
        validate()
          .then(() => {
            moveRoleApi({
              roleId: props.currentRow.id,
              targetId: modelRef.id,
            }).then((res) => {
              Modal.notice(res, 'success');
              emit('transfer', modelRef.name);
              closeDialog();
            });
          })
          .catch(() => {});
        return false;
      };

      // 去重的数组
      // eslint-disable-next-line no-unused-vars
      let columnID = ref([]);
      // 加载数据
      onMounted(() => {
        nextTick(() => {
          const arr = [];
          arr.push(toRaw(props.currentRow.id));
          columnID.value = arr;
        });
      });

      // 刷新
      const refresh = () => {};

      // 收起
      const packup = () => {};

      // 关闭树形dialog
      const selectSubmit = (treeNode) => {
        if (treeNode?.rows[0]?.bean?.ROLE_TYPE_CODE === 'folder') {
          Modal.alert('角色不能转移到文件夹下', 'error');
          return false;
        }
        return true;
      };

      return {
        modelRef,
        validateInfos,
        resetFields,
        onSubmit,
        closeDialog,
        visible1,
        treeVisible,
        selectSubmit,
        refresh,
        packup,
        columnID,
      };
    },
  });
</script>

<style lang="less" scoped>
  .transfer {
    .tree-dialog {
      :deep(.je-modal--box) {
        width: 400px !important;
      }
      :deep(.je-modal--wrapper .je-modal--body) {
        padding: 0 20px !important;
      }
    }
    :deep(.fa-window-maximize) {
      display: none;
    }
    :deep(.table-treeView2 .ant-select-selection-search-input) {
      border-bottom: none;
    }
    :deep(.table-treeView2 .ant-input-affix-wrapper.ant-select-selection-search-input) {
      &:hover {
        border-bottom: 1px solid #5c8dff;
      }
    }
    :deep(.table-treeView2 .ant-input-affix-wrapper-focused.ant-select-selection-search-input) {
      border-bottom: 1px solid #5c8dff;
    }
  }
</style>
